<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <!-- 适配移动端 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的个人主页</title>
    <!-- 引入图标库（用于联系方式图标） -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 嵌入之前的 CSS 样式 -->
    <style>
        /* 全局样式重置与基础设置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft Yahei", sans-serif;
        }

        body {
            line-height: 1.6;
            color: #333;
            background-color: #fff;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        /* 头部导航 */
        .nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 2rem;
            background-color: #fff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }

        .nav .logo {
            font-size: 1.2rem;
            font-weight: bold;
            color: #2c82e0;
        }

        .nav .menu {
            display: flex;
            gap: 1.5rem;
        }

        .nav .menu a {
            font-size: 0.9rem;
            color: #555;
            transition: color 0.3s;
        }

        .nav .menu a:hover {
            color: #2c82e0;
        }

        /* 关于我区域 */
        .hero {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 4rem 2rem;
            background-color: #e9f0f7;
            text-align: center;
        }

        .hero .avatar {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            overflow: hidden;
            margin-bottom: 1rem;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .hero .avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .hero h1 {
            font-size: 1.8rem;
            margin-bottom: 0.5rem;
        }

        .hero .title {
            font-size: 1rem;
            color: #2c82e0;
            margin-bottom: 1rem;
        }

        .hero p {
            max-width: 600px;
            margin-bottom: 1.5rem;
            color: #555;
        }

        .hero .btn {
            padding: 0.6rem 1.2rem;
            background-color: #2c82e0;
            color: #fff;
            border-radius: 4px;
            transition: background-color 0.3s;
            border: none;
            cursor: pointer;
        }

        .hero .btn:hover {
            background-color: #1a68c0;
        }

        /* 通用section样式 */
        .section {
            padding: 3rem 2rem;
        }

        .section h2 {
            text-align: center;
            font-size: 1.5rem;
            margin-bottom: 1.5rem;
            position: relative;
        }

        .section h2::after {
            content: "";
            position: absolute;
            bottom: -0.5rem;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 3px;
            background-color: #2c82e0;
        }

        /* 教育背景 */
        .education {
            background-color: #fff;
        }

        .education-card {
            max-width: 800px;
            margin: 0 auto;
            padding: 1.5rem;
            background-color: #f9f9f9;
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
        }

        .education-card .school {
            font-size: 1.1rem;
            color: #2c82e0;
            margin-bottom: 0.5rem;
        }

        .education-card .time {
            color: #28a745;
            margin-bottom: 0.5rem;
            font-size: 0.9rem;
        }

        .education-card .major {
            margin-bottom: 0.5rem;
        }

        .education-card .courses {
            color: #666;
            font-size: 0.9rem;
        }

        /* 技能特长 */
        .skills {
            background-color: #f5f7fa;
        }

        .skills-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
            max-width: 1000px;
            margin: 0 auto;
        }

        .skill-card {
            background-color: #fff;
            padding: 1.5rem;
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
        }

        .skill-card h3 {
            text-align: center;
            margin-bottom: 1.5rem;
            font-size: 1.1rem;
        }

        .skill-item {
            margin-bottom: 1rem;
        }

        .skill-item label {
            display: block;
            margin-bottom: 0.5rem;
            font-size: 0.9rem;
        }

        .skill-bar {
            height: 8px;
            background-color: #e9ecef;
            border-radius: 4px;
            overflow: hidden;
        }

        .skill-progress {
            height: 100%;
            background: linear-gradient(90deg, #42a5f5, #26c6da);
            border-radius: 4px;
            transition: width 1s ease-in-out;
        }

        /* 项目经历 */
        .projects {
            background-color: #fff;
        }

        .projects-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
            max-width: 1000px;
            margin: 0 auto;
        }

        .project-card {
            background-color: #fff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
        }

        .project-card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .project-info {
            padding: 1.5rem;
        }

        .project-info .project-title {
            font-size: 1.1rem;
            margin-bottom: 0.5rem;
        }

        .project-info .project-time {
            color: #28a745;
            margin-bottom: 1rem;
            font-size: 0.9rem;
        }

        .project-info p {
            margin-bottom: 1rem;
            color: #666;
            font-size: 0.9rem;
        }

        .project-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .project-tags span {
            padding: 0.3rem 0.6rem;
            background-color: #f0f4f8;
            border-radius: 4px;
            font-size: 0.8rem;
            color: #4a90e2;
        }

        /* 联系方式 */
        .contact {
            background-color: #f5f7fa;
        }

        .contact-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
            max-width: 1000px;
            margin: 0 auto;
        }

        .contact-info .item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 1.5rem;
        }

        .contact-info .item i {
            color: #2c82e0;
            margin-right: 1rem;
            font-size: 1.2rem;
            margin-top: 0.2rem;
        }

        .contact-info .item .info {
            color: #555;
        }

        .contact-info .item .info a {
            color: #2c82e0;
        }

        .contact-form {
            background-color: #fff;
            padding: 1.5rem;
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
        }

        .contact-form h3 {
            text-align: center;
            margin-bottom: 1.5rem;
            font-size: 1.1rem;
        }

        .contact-form .form-group {
            margin-bottom: 1rem;
        }

        .contact-form label {
            display: block;
            margin-bottom: 0.5rem;
            font-size: 0.9rem;
        }

        .contact-form input,
        .contact-form textarea {
            width: 100%;
            padding: 0.6rem;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 0.9rem;
        }

        .contact-form textarea {
            min-height: 100px;
            resize: vertical;
        }

        .contact-form .btn {
            display: block;
            width: 100%;
            padding: 0.6rem;
            background-color: #2c82e0;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .contact-form .btn:hover {
            background-color: #1a68c0;
        }

        /* 页脚 */
        .footer {
            background-color: #343a40;
            color: #fff;
            padding: 2rem;
            text-align: center;
        }

        .footer p {
            margin-bottom: 0.5rem;
            font-size: 0.9rem;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .nav {
                flex-direction: column;
                gap: 1rem;
            }

            .skills-container,
            .projects-container,
            .contact-container {
                grid-template-columns: 1fr;
            }

            .hero {
                padding: 3rem 1rem;
            }

            .section {
                padding: 2rem 1rem;
            }
        }
    </style>
</head>

<body>
    <!-- 导航栏 -->
    <nav class="nav">
        <div class="logo">我的个人主页</div>
        <div class="menu">
            <a href="#about">关于我</a>
            <a href="#education">教育背景</a>
            <a href="#skills">技能特长</a>
            <a href="#projects">项目经历</a>
            <a href="#contact">联系方式</a>
        </div>
    </nav>

    <!-- 关于我 -->
    <section class="hero" id="about">
        <div class="avatar">
            <!-- 替换为自己的头像图片（本地图片或网络图片） -->
            <img src="https://qlogo4.store.qq.com/qzone/2484117750/2484117750/100?1753597670" alt="个人头像">
        </div>
        <h1>魏才博</h1>
        <div class="title">前端开发工程师</div>
        <p>热爱编程、专注前端技术，擅长 HTML/CSS/JavaScript 开发，追求优雅的代码和良好的用户体验。乐于学习新技术，不断提升自己的专业能力。</p>
        <button class="btn">联系我</button>
    </section>

    <!-- 教育背景 -->
    <section class="section education" id="education">
        <h2>教育背景</h2>
        <div class="education-card">
            <div class="school">西南大学</div>
            <div class="time"><i class="fas fa-calendar-alt"></i> 2025.09 - 2029.06</div>
            <div class="major">软件工程（本科）</div>
            <div class="courses">主修课程：数据结构、计算机网络、JavaScript 高级程序设计、Web 前端开发、操作系统</div>
        </div>
    </section>

    <!-- 技能特长 -->
    <section class="section skills" id="skills">
        <h2>技能特长</h2>
        <div class="skills-container">
            <!-- 技术技能 -->
            <div class="skill-card">
                <h3>技术技能</h3>
                <div class="skill-item">
                    <label>HTML/CSS</label>
                    <div class="skill-bar">
                        <div class="skill-progress" style="width: 95%;"></div>
                    </div>
                </div>
                <div class="skill-item">
                    <label>JavaScript</label>
                    <div class="skill-bar">
                        <div class="skill-progress" style="width: 85%;"></div>
                    </div>
                </div>
                <div class="skill-item">
                    <label>Vue.js</label>
                    <div class="skill-bar">
                        <div class="skill-progress" style="width: 80%;"></div>
                    </div>
                </div>
                <div class="skill-item">
                    <label>React</label>
                    <div class="skill-bar">
                        <div class="skill-progress" style="width: 75%;"></div>
                    </div>
                </div>
                <div class="skill-item">
                    <label>Node.js</label>
                    <div class="skill-bar">
                        <div class="skill-progress" style="width: 65%;"></div>
                    </div>
                </div>
            </div>
            <!-- 其他技能 -->
            <div class="skill-card">
                <h3>其他技能</h3>
                <div class="skill-item">
                    <label>UI/UX 设计</label>
                    <div class="skill-bar">
                        <div class="skill-progress" style="width: 70%;"></div>
                    </div>
                </div>
                <div class="skill-item">
                    <label>Git 版本控制</label>
                    <div class="skill-bar">
                        <div class="skill-progress" style="width: 90%;"></div>
                    </div>
                </div>
                <div class="skill-item">
                    <label>英语读写</label>
                    <div class="skill-bar">
                        <div class="skill-progress" style="width: 85%;"></div>
                    </div>
                </div>
                <div class="skill-item">
                    <label>团队协作</label>
                    <div class="skill-bar">
                        <div class="skill-progress" style="width: 90%;"></div>
                    </div>
                </div>
                <div class="skill-item">
                    <label>问题解决</label>
                    <div class="skill-bar">
                        <div class="skill-progress" style="width: 88%;"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 项目经历 -->
    <section class="section projects" id="projects">
        <h2>项目经历</h2>
        <div class="projects-container">
            <!-- 项目1 -->
            <div class="project-card">
                <img src="https://picsum.photos/id/180/800/400" alt="个人博客网站">
                <div class="project-info">
                    <div class="project-title">个人博客网站</div>
                    <div class="project-time"><i class="fas fa-calendar-alt"></i> 2022.03 - 2022.06</div>
                    <p>基于 Vue3 + Node.js 开发的个人博客系统，支持文章发布、分类标签、评论互动、后台管理等功能。采用响应式设计，适配移动端和桌面端。</p>
                    <div class="project-tags">
                        <span>Vue3</span>
                        <span>Node.js</span>
                        <span>Express</span>
                        <span>MongoDB</span>
                        <span>响应式</span>
                    </div>
                </div>
            </div>
            <!-- 项目2 -->
            <div class="project-card">
                <img src="https://picsum.photos/id/26/800/400" alt="电商购物网站">
                <div class="project-info">
                    <div class="project-title">电商购物网站</div>
                    <div class="project-time"><i class="fas fa-calendar-alt"></i> 2022.09 - 2023.01</div>
                    <p>团队协作开发的电商平台，负责前端页面实现和交互逻辑。包含商品列表、详情页、购物车、订单结算等模块，使用 React + Redux 进行状态管理。</p>
                    <div class="project-tags">
                        <span>React</span>
                        <span>Redux</span>
                        <span>Axios</span>
                        <span>Ant Design</span>
                        <span>电商</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 联系方式 -->
    <section class="section contact" id="contact">
        <h2>联系方式</h2>
        <div class="contact-container">
            <div class="contact-info">
                <div class="item">
                    <i class="fas fa-phone"></i>
                    <div class="info">电话：15063115335</div>
                </div>
                <div class="item">
                    <i class="fas fa-envelope"></i>
                    <div class="info">邮箱：ajmdWilliam@outlook.com</div>
                </div>
                <div class="item">
                    <i class="fab fa-github"></i>
                    <div class="info">GitHub：<a href="https://gitee.com/archimedeswilliam"
                            target="_blank">gitee.com/archimedeswilliam</a></div>
                </div>
                <div class="item">
                    <i class="fas fa-map-marker-alt"></i>
                    <div class="info">地址：米乐星球</div>
                </div>
            </div>
            <div class="contact-form">
                <h3>发送消息</h3>
                <form>
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input type="text" id="name" placeholder="请输入您的姓名">
                    </div>
                    <div class="form-group">
                        <label for="email">邮箱</label>
                        <input type="email" id="email" placeholder="请输入您的邮箱">
                    </div>
                    <div class="form-group">
                        <label for="message">留言内容</label>
                        <textarea id="message" placeholder="请输入您想对我说的话"></textarea>
                    </div>
                    <button type="submit" class="btn">发送</button>
                </form>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
        <p>© 2025 我的个人主页 | 前端开发工程师</p>
        <p>感谢访问</p>
    </footer>

    <!-- 技能进度条动画（页面加载后触发） -->
    <script>
        window.addEventListener('load', function () {
            const progressBars = document.querySelectorAll('.skill-progress');
            progressBars.forEach(bar => {
                const width = bar.style.width;
                bar.style.width = '0';
                setTimeout(() => {
                    bar.style.width = width;
                }, 300);
            });
        });
    </script>
</body>

</html>